<template>
  <div>
    <div id="head">
      <van-icon size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      编辑资料
    </div>
    <div >
      <van-cell-group>
        <van-cell class="custom-cell" title="用户头像" is-link @click="showPopup">
          <van-image class="van-image" round :src="userDetail.photo" fit="cover" />
        </van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '35%' }">
          <van-uploader v-model="fileList" multiple :after-read="read" :max-count="1">
            <van-cell title="相册选择" style="margin-bottom: 80px"/>
          </van-uploader>
            <van-cell title="确定" @click="upLoadPhoto()" />
            <van-cell title="取消" @click="show = false" />
        </van-popup>
        <van-cell class="custom-cell" title="手机号码" :value="userDetail.phone" is-link @click="toDialog" />
        <van-cell class="custom-cell" title="用户名称" :value="userDetail.username" is-link @click="toDialog2" />
        <van-cell class="custom-cell" title="修改密码"  is-link @click="toDialog3" />
      </van-cell-group>
    </div>
    <!-- 新增标签弹窗 -->
    <van-dialog v-model="showDialog" title="更改手机号" show-cancel-button @confirm="onConfirm" @cancel="onCancel">
      <van-field v-model="form.phone"  label="手机号" placeholder="请输入手机号"/>
    </van-dialog>

    <van-dialog v-model="showDialog2" title="更改姓名" show-cancel-button @confirm="onConfirm2" @cancel="onCancel2">
      <van-field v-model="form.username" label="姓名" placeholder="请输入姓名"/>
    </van-dialog>

    <van-dialog v-model="showDialog3" title="更改密码" show-cancel-button @confirm="onConfirm3" @cancel="onCancel3">
      <van-field v-model="oldPassword" label="旧密码" placeholder="请输入旧密码"/>
      <van-field v-model="newPassword1" label="新密码" placeholder="请输入新密码"/>
      <van-field v-model="newPassword2" label="新密码确认" placeholder="请输入新密码"/>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from "vant";
import axios from "axios";

export default {
  data(){
    return{
      userAvatar: "https://img01.yzcdn.cn/vant/cat.jpeg", // 替换为实际的头像路径
      phoneNumber: '18074432667',
      userName: '张三',
      show: false,
      showDialog:false,
      showDialog2:false,
      showDialog3:false,
      newPhone:"",
      newName:"",
      oldPassword:"",
      newPassword1:"",
      newPassword2:"",
      image: [],
      formData: {},
      user:{},
      form:{},
      userDetail:{},
      fileList:[],
    }
  },
  methods:{
    updatePhoto(){
      this.form.userId = this.user.userId;
      this.form.photo = this.image;
      axios.post("http://localhost:9999/api-user-service/user/updatePhoto",this.form).then(res=>{
        this.$toast("修改完成");
        this.findById();
      })
    },
    updatePassword(){
        if (this.oldPassword == this.userDetail.password){
          if (this.newPassword1 == this.newPassword2){
            this.form.password = this.newPassword1;
            this.form.userId = this.user.userId;
            axios.post("http://localhost:9999/api-user-service/user/updatePassword",this.form).then(res=>{
              this.$toast("修改完成");
              this.findById();
            })
            }
          }
    },
    updateUsername(){
      this.form.userId = this.user.userId;
      axios.post("http://localhost:9999/api-user-service/user/updateUsername",this.form).then(res=>{
        this.$toast("修改完成");
        this.findById();
      })
    },
    update(){
      this.form.userId = this.user.userId;
      axios.post("http://localhost:9999/api-user-service/user/update1",this.form).then(res=>{
        this.$toast("修改完成");
        this.findById();
      })
    },
    read(file) {
      const files = Array.isArray(file) ? file : [file];
      files.forEach((item) => {
        // 创建 FormData
        const formData = new FormData();
        formData.append('file', item.file);
        // 上传文件到服务器
        this.axios.post('http://localhost:9999/myModule-service/oss/upload', formData, {
          headers: {
            // 设置请求头
            'Content-Type': 'multipart/form-data',
          },
        }).then(res => {
          // 初始化 shippingannex 为字符串
          if (!this.formData.shippingannex) {
            this.formData.shippingannex = '';
          }
          // 将文件 URL 添加到字符串中，用逗号分隔
          this.formData.shippingannex = this.formData.shippingannex
              ? this.formData.shippingannex + ',' + res.data
              : res.data;
          // this.image.push(res.data.data);
          // console.log(this.image)
          this.image = this.formData.shippingannex;
          this.form.photo = this.formData.shippingannex;
          console.log(this.image);

          Toast.success('文件上传成功');

        })
      });
    },
    upLoadPhoto(){
      this.updatePhoto();
      this.findById();
      this.show = false;
    },
    toDialog3(){
      this.showDialog3 = true;
    },
    onConfirm3(){
      this.updatePassword();
      this.findById();
    },
    onCancel3(){
      this.showDialog3 = false;
    },
    toDialog2(){
      this.showDialog2 = true;
    },
    onConfirm2(){
      this.updateUsername();
      this.findById();
    },
    onCancel2(){
      this.showDialog2 = false;
    },
    toDialog(){
      this.showDialog = true;
    },
    onConfirm(){
      this.update();
      this.findById();
    },
    onCancel(){
    this.showDialog = false;
    },
    showPopup() {
      this.show = true;
    },
    toHead(){
      this.$router.push('/my')
    },
    findById(){
      axios.post("http://localhost:9999/api-user-service/user/findById?id="+this.user.userId).then(res=>{
        this.userDetail = res.data;
      })
    }
  },
  created(){
    this.user = JSON.parse(localStorage.getItem("aa"));
    this.findById();
  }
}
</script>

<style scoped>
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.custom-cell .van-cell__title {
  text-align: left;
  ::v-deep .van-icon {
    display: flex;
    align-items: center;
  }
}
.van-image {
  width: 50px; /* 根据需要设置图片宽度 */
  height: 50px; /* 根据需要设置图片高度 */
}
</style>
